<template>
  <div class="">
    <DataManipulation
      title="添加签约方"
      formRef="addContractPartyRef"
      :formList="formList"
      :form="form"
      :rules="rules"
      :buttonList="buttonList"
      @verifiedPassed="submitForm"
      style="margin: 0 20px 0 13px"
    >
      <template #secondHalf>
        <el-form labelWidth="108px">
          <el-form-item label="备注">
            <el-input
              type="textarea"
              :rows="6"
              placeholder="请输入内容"
              v-model="form.remark"
              style="width: 90%"
              maxlength="200"
              show-word-limit
              :class="{
                'input-limit-reached': form.remark && form.remark.length >= 200,
              }"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </template>
    </DataManipulation>
  </div>
</template>

<script>
import { addContractParty } from "@/api/contract/ContractParty";
export default {
  data() {
    return {
      formList: [
        {
          labelList: [
            {
              label: "签约方名称",
              prop: "name",
              type: "el-input",
              span: 8,
              labelWidth: "108px",
              components: {
                placeholder: "请输入",
              },
            },
            {
              label: "联系电话",
              prop: "telephone",
              labelWidth: "108px",
              type: "el-input",
              instruction: "number",
              span: 8,
              components: {
                placeholder: "请输入",
              },
            },
            {
              label: "地址",
              prop: "address",
              labelWidth: "108px",
              type: "el-input",
              span: 8,
              components: {
                placeholder: "请输入",
              },
            },
          ],
        },
        {
          labelList: [
            {
              label: "负责人",
              prop: "director",
              type: "el-input",
              labelWidth: "108px",
              span: 8,
              components: {
                placeholder: "请输入",
              },
            },
            {
              label: "纳税人识别号",
              prop: "taxpayerNumber",
              labelWidth: "108px",
              span: 8,
              type: "el-input",
              components: {
                placeholder: "请输入",
              },
            },
            {
              label: "开户名称",
              prop: "accountName",
              labelWidth: "108px",
              span: 8,
              type: "el-input",
              components: {
                placeholder: "请输入",
              },
            },
          ],
        },
        {
          labelList: [
            {
              label: "银行账号",
              labelWidth: "108px",
              prop: "bankAccount",
              type: "el-input",
              span: 8,
              components: {
                placeholder: "请输入",
              },
            },
          ],
        },
      ],
      form: {
        telephone: "",
        name: "",
        address: "",
        remark: "",
        director: "",
        taxpayerNumber: "",
        accountName: "",
        bankAccount: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "签约方名称不能为空",
            trigger: "blur",
          },
        ],
      },
      buttonList: [
        {
          text: "取消",
          methods: this.Cancel,
        },
      ],
    }; //这里存放数据
  },
  components: {}, //import引入的组件需要注入到对象中才能使用
  computed: {}, //监听属性 类似于data概念
  watch: {}, //监控data中的数据变化
  methods: {
    Cancel() {
      this.$router.go(-1);
    },
    submitForm() {
      console.log(this.form);
      addContractParty(this.form).then((res) => {
        console.log(res);
        this.$modal.msgSuccess("操作成功");
        this.Cancel();
      });
    },
  }, //方法集合
  created() {}, //生命周期 - 创建完成(可以访问当前this实例)
  mounted() {}, //生命周期 - 挂载完成（可以访问DOM元素）
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
/* 当达到最大长度时，计数器颜色变为红色 */
.input-limit-reached ::v-deep .el-input__count {
  color: red !important;
}
</style>
